<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ include file="/wesite/view/common/base.jsp" %>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <title>我的优惠券</title>
    <%@ include file="/wesite/view/common/common.jsp" %>
    <script type="text/javascript" src="${webctx}/script/aui-tab.js"></script>
    <script type="text/javascript" src="${webctx}/script/aui-scroll.js"></script>
    <script src="${webctx}/script/aui-toast.js"></script>
</head>
<style>
    .couponListHolder{
        text-align: center;
        color: #999;
    }
</style>
<body>
<div class="discount-list" style="padding-top: 2.5rem;">

    <div class="head-tab" style="position: fixed; top: 0;left: 0; right: 0; z-index:20;">

        <div class="aui-tab" id="tab">
            <div class="aui-tab-item aui-active" st="1" >未使用<span id="count1"></span></div>
            <div class="aui-tab-item" st="2">已使用<span id="count2"></span></div>
                                    <div class="aui-tab-item" st="3">已过期<span id="count3"></span></div>
        </div>
    </div>

    <div id="usableSize_Id">

    </div>

        <div id="couponContainer">
            <div class="tab-ct-item my-coupon-item" style="display:block" st="1" ct="0" pn="1" ing="false">
                <ul>

                </ul>

                <div class="couponListHolder"></div>
            </div>

            <div class="tab-ct-item my-coupon-item coupon-have-used" st="2" ct="0" pn="1" ing="false">
                <ul>

                </ul>

                <div class="couponListHolder"></div>
            </div>
            <div class="tab-ct-item my-coupon-item coupon-state" st="3" ct="0" pn="1" ing="false">
                <ul>

                </ul>

                <div class="couponListHolder"></div>
            </div>
        </div>
</div>

</body>
<script type="text/javascript">
    apiready = function () {
        api.parseTapmode();
    }
    /*切换*/
    var tab = new auiTab({
        element: document.getElementById("tab"),
    });

    $('.aui-tab-item').click(function (e) {
        var selectState = parseInt($(this).attr("st"));
        var tabItem = $("#couponContainer div.tab-ct-item[st='" + selectState + "']");
        tabItem.show().siblings().hide();

        if (parseInt(tabItem.attr("ct")) <= 0 && tabItem.attr("ing") == "false") {
            loadcoupon(selectState);
        }

        return false;

    });
</script>


<script>

    var myCouponListPageSize = 10;
    function loadcoupon(st) {

        if (!st) {
            return false;
        }

        var tabItem = $("#couponContainer div.tab-ct-item[st='" + st + "']");

        if (tabItem.attr("ing") == "true") {
            return false;
        } else {
            tabItem.attr("ing", "true");
        }

        var stPn = parseInt(tabItem.attr("pn"));
        if (stPn == 0) {
            return false;
        }

        tabItem.find(".couponListHolder").text("正在加载 ...").show();
        var url = apiroot + '/we/home/my-coupon-list?psize=' + myCouponListPageSize + '&state=' + st + '&pno=' + stPn;
        $w.httpRequest({
            url: url,
            data: {"timestamp": new Date().getTime()},
            ok: function (ret) {
                var usableSize = ret.Data.usablesize;
                var usablesizeHtml="";
                if (usableSize >0) {
                    usablesizeHtml += "<a href='"+ ctx +"/we/home/usable' class='aside-msg'>";
                    usablesizeHtml += "<span></span>您有<em>"+ usableSize  +"</em>张优惠券待领取";
                    usablesizeHtml += "</a>";
                    $("#usableSize_Id").html(usablesizeHtml);
                }
                var datecountList = ret.Data.count;
                for (var i = 0;i<datecountList.length;i++) {
                    var datacount   = datecountList[i];
                    if (datacount.type == 1) {
                        $("#count1").text( "(" +datacount.typecount +")" );
                    }
                    if (datacount.type == 2) {
                        $("#count2").text( "(" +datacount.typecount +")" );
                    }
                    if (datacount.type == 3) {
                        $("#count3").text( "(" +datacount.typecount +")" );
                    }
                }


                tabItem.attr("ing", "false");

                var datas = ret.Data.list;
                var panel = tabItem.find("ul");
                if (panel.length > 0 && datas && datas.length > 0) {
                    for (var i = 0; i < datas.length; i++) {
                        var data = datas[i];

                        var h = "";
                        var dataEndTime = new Date(data.enddate);
                        var datenew = new Date();

                        var surplusDay = Math.floor((dataEndTime.getTime()-datenew.getTime())/(24*3600*1000));

                        h += "<li>";
                        h += ("<div class='coupon-price fl'>￥<em>" + data.offer_money + "</em>"+(st==1?(surplusDay<=3 ? "<span class='time-stale'>快过期</span>" :""):"")+"</div>");
                        h += ("<div class='coupon-text fl'>");
                        h += ("<p class='condition-txt'>"+ data.name +"</p>");
                        h += ("<p class='condition-txt2'>满" + data.min_money + "可使用</p>");
                        if (data.enddate && data.enddate.length > 19) {
                            data.startdate = data.startdate.substr(0,16).replace(/[-]/g,"/");
                            data.enddate = data.enddate.substr(0,16).replace(/[-]/g,"/");
                        }
                        h += ("<p class='condition-time'>有效期 " + data.startdate + " - " + data.enddate + "</p>");
                        h += ("</div>");
                        h += ("<div class='cl'></div>");
                        h += "</li>";
                        panel.append(h);
                    }
                    tabItem.attr("ct", (parseInt(tabItem.attr("ct")) + datas.length));
                    tabItem.attr("pn", (stPn + 1));
                    tabItem.find(".couponListHolder").hide();
                    if (datas.length >= myCouponListPageSize) {
                        return true;
                    }
                }

                if (datas.length < myCouponListPageSize) {
                    if(tabItem.attr("ct")==""||tabItem.attr("ct")=="0"){
                        var h2 = "";
                        h2 += "<div class='empty-page'>";
                        h2 += ("<span class='txt-kong-img'><img src=\"" + ctx + "/wesite/images/Thome.png\" ></span>");
                        h2 += ( st == 1 ? "<p>暂无优惠券</p>" : (st == 2 ? "<p>没有已使用的优惠券</p>" : "<p>没有已过期的优惠券</p>"))
                        h2 += "</div>";
                        panel.append(h2)
                        tabItem.find(".couponListHolder").hide();
                    } else {
                        tabItem.attr("pn", 0);
                        tabItem.find(".couponListHolder").text("已加载全部").show();
                    }
                }

//                if (datas.length <= 0) {
//                    var h2 = "";
//                    h2 += "<div class='empty-page'>";
//                    h2 += ("<span class='txt-kong-img'><img src=\"" + ctx + "/wesite/images/Thome.png\" ></span>");
//                    h2 += ( st == 1 ? "<p>没有未使用的优惠券</p>" : (st == 2 ? "<p>没有已使用的优惠券</p>" : "<p>没有已过期的优惠券</p>"))
//                    h2 += "</div>";
//                    panel.append(h2)
//                    tabItem.find(".couponListHolder").hide();
//                }
            }
        });
    }

    $(function () {

        loadcoupon("1");

        var bottomHeight = 10;

        var scroll = new auiScroll({
            listen: true, //是否监听滚动高度，开启后将实时返回滚动高度
            distance: bottomHeight //判断到达底部的距离，isToBottom为true
        }, function (ret) {
            if (ret.isToBottom) {
                var st = $("#tab div.aui-tab-item.aui-active").attr("st");
                var titem = $("#couponContainer div.tab-ct-item[st='" + st + "']");
                if (st && titem.attr("pn") != 0 && titem.attr("ing") == "false") {
                    loadcoupon(st);
                }
            }
        });

    });

</script>

</html>